<template>
  <!-- 条件渲染：仅当 visible 为 true 时显示 -->
  <div v-if="visible" class="overlay-container" :class="{ 'overlay-fade': fade }" @click="onClose">
    <!-- 插槽：用于传入自定义内容（如弹窗、加载动画等） -->
    <div class="overlay-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
  import { defineProps, defineEmits } from 'vue';

  // 接收外部传入的 props
  const props = defineProps({
    // 控制遮挡层显示/隐藏
    visible: {
      type: Boolean,
      default: false,
    },
    // 是否启用淡入淡出动画
    fade: {
      type: Boolean,
      default: true,
    },
    // 点击遮罩层是否关闭
    closeOnClickOverlay: {
      type: Boolean,
      default: false,
    },
  });

  // 定义 emits 事件
  const emit = defineEmits(['close']);

  // 点击遮罩层触发关闭（仅当允许时）
  const onClose = () => {
    if (props.closeOnClickOverlay) {
      emit('close'); // 向父组件传递关闭事件
    }
  };
</script>

<style scoped>
  /* 遮罩层容器：全屏覆盖 */
  .overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000; /* 确保层级最高 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    transition: opacity 0.3s ease;
  }

  /* 淡入淡出动画 */
  .overlay-fade {
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* 插槽内容容器：可自定义样式 */
  .overlay-content {
    display: flex;
    justify-content: center;
    width: 100%;
  }
</style>
